<template>
	<view class="minebigbox">
		<view class="myhome">
			<!-- 登录 -->
			<view class="myhome-logon">
				<view class="logon-name-image">
					<image src="../../static/a.jpg" mode=""></image>
					<view class="logon-name">
						{{name}}
					</view>
				</view>
				<view class="tologon">
					去登录>
				</view>



			</view>
			<!-- 我的收藏挂号记录 -->
			<view class="mylike">
				<view class="mylike-item">
						<image src="../../static/b.jpg" mode=""></image>
					<text>我的收藏</text>
					
				</view>
				<view class="mylike-item">
					<image src="../../static/b.jpg" mode=""></image>
					<text>我的收藏</text>
					
				</view>
					<view class="mylike-item">
					<image src="../../static/b.jpg" mode=""></image>
					<text>我的收藏</text>
					
				</view>
			</view>
			
			
			<!-- 文字区域 -->
			<view class="text-option">
				<view class="text-one">
					<text>我的电子社保卡</text>
					<text> > </text>
					
				</view>
				<view class="text-one">
					<text>线上微信住院押金缴费记录</text>
					<text> > </text>
					
				</view>
				<view class="text-one">
					<text>线上微信结算缴费记录</text>
					<text> > </text>
					
				</view>
				<view class="text-one">
					<text>病例复印记录</text>
					<text> > </text>
					
				</view>
				<view class="text-one">
					<text>职工挂号记录</text>
					<text> > </text>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "暂未登录"
			};
		}
	}
</script>

<style lang="scss">
	.minebigbox {
		padding: 20px 16px ;
		background-color: #f8f8f8;
		.myhome {

			.myhome-logon {
				display: flex;
				justify-content: space-between;
				.logon-name-image {
					display: flex;
					justify-content: space-between;
					width: 120px;

					image {
						width: 50px;
						height: 50px;

					}

					.logon-name {
						height: 50px;
						font-size: 16px;
						font-weight: 600;
						line-height: 50px;
					}
				}
				.tologon{
					height: 50px;
					font-size: 14px;
					line-height: 50px;
					color: #9fa0a2;
				}

			}
			
			
			.mylike{
				margin-top: 16px;
				background-color: #ffffff;
				padding: 20px 0;
				border-radius: 8px;
				display:flex;
				justify-content: space-between;
				.mylike-item{
					width: 30%;
					margin: 0 auto;
					text-align:center;
					
					image{
						width: 50px;
						// display: block;
						height:50px;
						
						
					}
					text{
						font-size: 12px;
						display: block;
						
					}
				}
				
			}
			.text-option{
				margin-top: 16px;
				background-color: #ffffff;
				border-radius: 8px;
				
				.text-one{
					padding: 10px;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					&>text:nth-child(1){
						font-size: 14px;
						
					}
					&>text:nth-child(2){
						font-size: 20px;
						color: #9fa0a2;
					}
				}
			}

		}

	}
</style>